<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="A fully featured admin theme which can be used to build CRM, CMS, etc.">
        <meta name="author" content="Coderthemes">
        <style type="text/css">
             ::-webkit-scrollbar {display:none}
        </style>

        <!-- App Favicon -->
        <link rel="shortcut icon" href="assets/images/favicon.ico">

        <!-- App title -->
        <title>Uplon - Responsive Admin Dashboard Template</title>

        <!--Morris Chart CSS -->
		<link rel="stylesheet" href="assets/plugins/morris/morris.css">

        <!-- Switchery css -->
        <link href="assets/plugins/switchery/switchery.min.css" rel="stylesheet" />

        <!-- Bootstrap CSS -->
        <link href="assets/css/bootstrap.min.css" rel="stylesheet" type="text/css" />

        <!-- App CSS -->
        <link href="assets/css/style.css" rel="stylesheet" type="text/css" />
		<link href="assets/css/tabstyle.css" rel="stylesheet" type="text/css" />
  	
    </head>


    <body>

        <!-- Begin page -->
        <div id="wrapper">

            <!-- Top Bar Start -->
            <div class="topbar">

                <!-- LOGO -->
                <div class="topbar-left">
                    <a href="index.html" class="logo" >
                        <i class="zmdi zmdi-group-work icon-c-logo"></i>
                        <span>Uplon</span></a>
                </div>

                <nav class="navbar-custom">

                    <ul class="list-inline float-right mb-0">
                        <li class="list-inline-item dropdown notification-list">
                            <span class="nav-link dropdown-toggle arrow-none waves-light waves-effect" data-toggle="dropdown" href="index.html#" role="button"
                               aria-haspopup="false" aria-expanded="false">
                                <i class="zmdi zmdi-notifications-none noti-icon"></i>
                                <span class="noti-icon-badge"></span>
                            </span>
                            <div class="dropdown-menu dropdown-menu-right dropdown-arrow dropdown-lg" aria-labelledby="Preview">
                                <!-- item-->
                                <div class="dropdown-item noti-title">
                                    <h5><small><span class="label label-danger pull-xs-right">7</span>通知</small></h5>
                                </div>

                                <!-- item-->
                                <a href="javascript:void(0);" class="dropdown-item notify-item">
                                    <div class="notify-icon bg-success"><i class="icon-bubble"></i></div>
                                    <p class="notify-details">Robert S. Taylor 评论 Admin<small class="text-muted">1分钟以前</small></p>
                                </a>

                                <!-- item-->
                                <a href="javascript:void(0);" class="dropdown-item notify-item">
                                    <div class="notify-icon bg-info"><i class="icon-user"></i></div>
                                    <p class="notify-details">新用户注册.<small class="text-muted">1分钟以前</small></p>
                                </a>

                                <!-- item-->
                                <a href="javascript:void(0);" class="dropdown-item notify-item">
                                    <div class="notify-icon bg-danger"><i class="icon-like"></i></div>
                                    <p class="notify-details">Carlos Crouch 喜欢 <b>Admin</b><small class="text-muted">1分钟以前</small></p>
                                </a>

                                <!-- All-->
                                <a href="javascript:void(0);" class="dropdown-item notify-item notify-all">
                                    所有人可见
                                </a>

                            </div>
                        </li>

                        <li class="list-inline-item dropdown notification-list">
                            <span class="nav-link dropdown-toggle arrow-none waves-light waves-effect" data-toggle="dropdown" href="index.html#" role="button"
                               aria-haspopup="false" aria-expanded="false">
                                <i class="zmdi zmdi-email noti-icon"></i>
                                <span class="noti-icon-badge"></span>
                            </span>
                            <div class="dropdown-menu dropdown-menu-right dropdown-arrow dropdown-arrow-success dropdown-lg" aria-labelledby="Preview">
                                <!-- item-->
                                <div class="dropdown-item noti-title bg-success">
                                    <h5><small><span class="label label-danger pull-xs-right">7</span>信息</small></h5>
                                </div>

                                <!-- item-->
                                <a href="javascript:void(0);" class="dropdown-item notify-item">
                                    <div class="notify-icon bg-faded">
                                        <img src="assets/images/users/avatar-2.jpg" alt="img" class="img-circle img-fluid">
                                    </div>
                                    <p class="notify-details">
                                        <b>Robert Taylor</b>
                                        <span>新的任务要做</span>
                                        <small class="text-muted">1分钟以前</small>
                                    </p>
                                </a>

                                <!-- item-->
                                <a href="javascript:void(0);" class="dropdown-item notify-item">
                                    <div class="notify-icon bg-faded">
                                        <img src="assets/images/users/avatar-3.jpg" alt="img" class="img-circle img-fluid">
                                    </div>
                                    <p class="notify-details">
                                        <b>Carlos Crouch</b>
                                        <span>新的任务要做</span>
                                        <small class="text-muted">1分钟以前</small>
                                    </p>
                                </a>

                                <!-- item-->
                                <a href="javascript:void(0);" class="dropdown-item notify-item">
                                    <div class="notify-icon bg-faded">
                                        <img src="assets/images/users/avatar-4.jpg" alt="img" class="img-circle img-fluid">
                                    </div>
                                    <p class="notify-details">
                                        <b>Robert Taylor</b>
                                        <span>新的任务要做</span>
                                        <small class="text-muted">1分钟以前</small>
                                    </p>
                                </a>

                                <!-- All-->
                                <a href="javascript:void(0);" class="dropdown-item notify-item notify-all">
                                    所有人可见
                                </a>

                            </div>
                        </li>

                        <li class="list-inline-item dropdown notification-list">
                            <span class="nav-link waves-effect waves-light right-bar-toggle" href="javascript:void(0);">
                                <i class="zmdi zmdi-format-subject noti-icon"></i>
                            </span>
                        </li>

                        <li class="list-inline-item dropdown notification-list">
                            <span class="nav-link dropdown-toggle waves-effect waves-light nav-user" data-toggle="dropdown" href="index.html#" role="button"
                               aria-haspopup="false" aria-expanded="false">
                                <img src="assets/images/users/avatar-1.jpg" alt="user" class="rounded-circle">
                            </span>
                            <div class="dropdown-menu dropdown-menu-right profile-dropdown " aria-labelledby="Preview">
                                <!-- item-->
                                <div class="dropdown-item noti-title">
                                    <h5 class="text-overflow"><small>欢迎 ! John</small> </h5>
                                </div>

                                <!-- item-->
                                <a href="javascript:void(0);" class="dropdown-item notify-item">
                                    <i class="zmdi zmdi-account-circle"></i> <span>外形</span>
                                </a>

                                <!-- item-->
                                <a href="javascript:void(0);" class="dropdown-item notify-item">
                                    <i class="zmdi zmdi-settings"></i> <span>设置</span>
                                </a>

                                <!-- item-->
                                <a href="javascript:void(0);" class="dropdown-item notify-item">
                                    <i class="zmdi zmdi-lock-open"></i> <span>锁屏</span>
                                </a>

                                <!-- item-->
                                <a href="javascript:void(0);" class="dropdown-item notify-item">
                                    <i class="zmdi zmdi-power"></i> <span>登出</span>
                                </a>

                            </div>
                        </li>

                    </ul>

                    <ul class="list-inline menu-left mb-0">
                        <li class="float-left">
                            <button class="button-menu-mobile open-left waves-light waves-effect">
                                <i class="zmdi zmdi-menu"></i>
                            </button>
                        </li>
                        <li class="hidden-mobile app-search">
                            <form role="search" class="">
                                <input type="text" placeholder="搜索..." class="form-control">
                                <a href=""><i class="fa fa-search"></i></a>
                            </form>
                        </li>
                    </ul>

                </nav>

            </div>
            <!-- Top Bar End -->

			
            <!-- ========== Left Sidebar Start ========== -->
            <div class="left side-menu">
                <div class="sidebar-inner slimscrollleft">

                    <!--- Sidemenu -->
                    <div id="sidebar-menu">
                        <ul class="menu">
                        	<li class="text-muted menu-title">分类</li>

                            <li class="has_sub">
                                <a href="dashboard.html" class="waves-effect"><span class="label label-pill label-primary float-right">1</span><i class="zmdi zmdi-view-dashboard"></i><span> 仪表 </span> </a>
                            </li>

                            <li class="has_sub">
                                <a href="javascript:void(0);"><i class="zmdi zmdi-format-underlined"></i> <span> 用户界面 </span> <span class="menu-arrow"></span></a>
                                <ul class="list-unstyled menu">
                                    <li><a href="ui-buttons.html" class="waves-effect">按钮</a></li>
                                    <li><a href="ui-cards.html" class="waves-effect">卡片集</a></li>
                                    <li><a href="ui-dropdowns.html" class="waves-effect">下载</a></li>
                                    <li><a href="ui-checkbox-radio.html#4" class="waves-effect">圆角复选框</a></li>
                                    <li><a href="ui-navs.html" class="waves-effect">导航栏</a></li>
                                    <li><a href="ui-progress.html" class="waves-effect">进度条</a></li>
                                    <li><a href="ui-modals.html" class="waves-effect">静态框</a></li>
                                    <li><a href="ui-notification.html" class="waves-effect">发布通知</a></li>
                                    <li><a href="ui-alerts.html" class="waves-effect">弹出框</a></li>
                                    <li><a href="ui-carousel.html" class="waves-effect">图文</a></li>
                                    <li><a href="ui-bootstrap.html" class="waves-effect">Bootstrap UI</a></li>
                                    <li><a href="ui-typography.html" class="waves-effect">字体排版</a></li>
                                    <li><a href="key.html" class="waves-effect">索引</a></li>
                                </ul>
                            </li>

                            <li class="has_sub">
                                <a href="javascript:void(0);" class=""><i class="zmdi zmdi-album"></i> <span> 组成部分 </span> <span class="menu-arrow"></span></a>
                                <ul class="list-unstyled menu">
                                    <li><a href="components-grid.html" class="waves-effect">网格</a></li>
                                    <li><a href="components-range-sliders.html" class="waves-effect">范围滑块</a></li>
                                    <li><a href="components-sweet-alert.html" class="waves-effect">提示弹框</a></li>
                                    <li><a href="components-ratings.html" class="waves-effect">等级</a></li>
                                    <li><a href="components-treeview.html" class="waves-effect">视图</a></li>
                                    <li><a href="components-tour.html" class="waves-effect">引导提示框</a></li>
                                </ul>
                            </li>

                            <li class="has_sub">
                                <a href="calendar.html" class="waves-effect"><i class="zmdi zmdi-calendar"></i><span>日历 </span> </a>
                            </li>

                            <li class="has_sub">
                                <a href="javascript:void(0);" class=""><i class="zmdi zmdi-widgets"></i> <span> 窗口小插件 </span> <span class="menu-arrow"></span></a>
                                <ul class="list-unstyled menu">
                                    <li><a href="widgets-tiles.html" class="waves-effect">块盒子</a></li>
                                    <li><a href="widgets-charts.html" class="waves-effect">数据图表</a></li>
                                </ul>
                            </li>

                            <li class="has_sub">
                                <a href="javascript:void(0);" class=""><i class="zmdi zmdi-fire"></i> <span> 图标集合 </span> <span class="menu-arrow"></span></a>
                                <ul class="list-unstyled">
                                    <li><a href="icons-materialdesign.html" class="waves-effect">物料设计</a></li>
                                    <li><a href="icons-ionicons.html" class="waves-effect">离子图标</a></li>
                                    <li><a href="icons-fontawesome.html" class="waves-effect">图标字体</a></li>
                                    <li><a href="icons-themify.html" class="waves-effect">Themify图标</a></li>
                                    <li><a href="icons-simple-line.html" class="waves-effect">线条图标</a></li>
                                    <li><a href="icons-weather.html" class="waves-effect">天气图标</a></li>
                                    <li><a href="icons-pe7.html" class="waves-effect">PE7 图标</a></li>
                                    <li><a href="icons-typicons.html" class="waves-effect">典型图标</a></li>
                                </ul>
                            </li>

                            <li class="has_sub">
                                <a href="javascript:void(0);" class=""><span class="label label-pill label-warning float-right">8</span><i class="zmdi zmdi-collection-text"></i><span> 表单 </span> </a>
                                <ul class="list-unstyled">
                                    <li><a href="form-elements.html" class="waves-effect">普通表单</a></li>
                                    <li><a href="form-advanced.html" class="waves-effect">高级表单</a></li>
                                    <li><a href="form-validation.html" class="waves-effect">表单验证</a></li>
                                    <li><a href="form-pickers.html" class="waves-effect">表单选择器</a></li>
                                    <li><a href="form-wizard.html" class="waves-effect">表单导向</a></li>
                                    <li><a href="form-mask.html" class="waves-effect">表单输入样式</a></li>
                                    <li><a href="form-uploads.html" class="waves-effect">多文件上传</a></li>
                                    <li><a href="form-xeditable.html" class="waves-effect">表单编辑</a></li>
                                </ul>
                            </li>

                            <li class="has_sub">
                                <a href="javascript:void(0);" class=""><i class="zmdi zmdi-format-list-bulleted"></i> <span> 表格 </span> <span class="menu-arrow"></span></a>
                                <ul class="list-unstyled">
                                	<li><a href="tables-basic.html" class="waves-effect">基本表格</a></li>
                                    <li><a href="tables-datatable.html" class="waves-effect">数据表格</a></li>
                                    <li><a href="tables-responsive.html" class="waves-effect">响应式表格</a></li>
                                    <li><a href="tables-tablesaw.html" class="waves-effect">移动表格</a></li>
                                </ul>
                            </li>

                            <li class="has_sub">
                                <a href="javascript:void(0);" class=""><i class="zmdi zmdi-chart"></i><span> 图表 </span> <span class="menu-arrow"></span></a>
                                <ul class="list-unstyled">
                                    <li><a href="chart-flot.html" class="waves-effect">浮选图表</a></li>
                                    <li><a href="chart-morris.html" class="waves-effect">对比图表</a></li>
                                    <li><a href="chart-chartjs.html" class="waves-effect">Chartjs</a></li>
                                    <li><a href="chart-peity.html" class="waves-effect">饼图</a></li>
                                    <li><a href="chart-chartist.html" class="waves-effect">图表</a></li>
                                    <li><a href="chart-c3.html" class="waves-effect">C3 图表</a></li>
                                    <li><a href="chart-sparkline.html" class="waves-effect">迷你图 </a></li>
                                    <li><a href="chart-knob.html" class="waves-effect">jQuery图表</a></li>
                                </ul>
                            </li>

                            <li class="text-muted menu-title">更多</li>

                            <li class="has_sub">
                                <a href="javascript:void(0);" class=""><span class="label label-success label-pill float-right">13</span><i class="zmdi zmdi-collection-item"></i><span>页面 </span></a>
                                <ul class="list-unstyled">
                                	<li><a href="pages-starter.html" class="waves-effect">起始页</a></li>
                                    <li><a href="pages-login.html" class="waves-effect">登录页</a></li>
                                    <li><a href="pages-register.html" class="waves-effect">注册页</a></li>
                                    <li><a href="pages-recoverpw.html" class="waves-effect">找回密码</a></li>
                                    <li><a href="pages-lock-screen.html" class="waves-effect">锁屏</a></li>
                                    <li><a href="pages-404.html" class="waves-effect">404错误提示</a></li>
                                    <li><a href="pages-500.html" class="waves-effect">500错误提示</a></li>
                                    <li><a href="pages-timeline.html" class="waves-effect">时间轴</a></li>
                                    <li><a href="pages-invoice.html" class="waves-effect">发票联</a></li>
                                    <li><a href="pages-pricing.html" class="waves-effect">定价</a></li>
                                    <li><a href="pages-gallery.html" class="waves-effect">画廊</a></li>
                                    <li><a href="pages-maintenance.html" class="waves-effect">系统维护</a></li>
                                    <li><a href="pages-comingsoon.html" class="waves-effect">倒计时器</a></li>
                                </ul>
                            </li>

                            <li class="has_sub">
                                <a href="javascript:void(0);" class=""><i class="zmdi zmdi-blur-linear"></i><span>多层次菜单 </span> <span class="menu-arrow"></span></a>
                                <ul>
                                    <li class="has_sub">
                                        <a href="javascript:void(0);" class="waves-effect"><span>多层次菜单1</span>  <span class="menu-arrow"></span>    </a>
                                        <ul style="">
                                            <li><a href="javascript:void(0);" class="waves-effect"><span>菜单项</span></a></li>
                                            <li><a href="javascript:void(0);" class="waves-effect"><span>菜单项</span></a></li>
                                            <li><a href="javascript:void(0);" class="waves-effect"><span>菜单项</span></a></li>
                                        </ul>
                                    </li>
                                    <li>
                                        <a href="javascript:void(0);"><span>多层次菜单2</span></a>
                                    </li>
                                </ul>
                            </li>

                        </ul>
                        <div class="clearfix"></div>
                    </div>
                    <!-- Sidebar -->
                    <div class="clearfix"></div>

                </div>

            </div>
            <!-- Left Sidebar End -->
			
			
			<div class="content-page">

                <div class="content">
				    <div id="page-tab">
						<i class="tab-btn fa fa-angle-double-left" id="page-prev"></i>
						<nav id="page-tab-content">
							<div id="menu-list">
                                                  
                            </div>
						</nav>
						<i class="tab-btn fa fa-angle-double-right" id="page-next"></i>
						<div id="page-operation">
							<div id="menu-all">
								<ul id="menu-all-ul">
								</ul>
							</div>
						</div>
					</div>
				            
				    <!--iframe Start (根据页面顶部占用高度，自行调整高度数值)-->
					<div id="page-content" class="niceScroll">
                        <iframe class="iframe-content active" data-url="chart-c3.html" src="chart-c3.html"></iframe>   
                    </div>
					<!--iframe End-->
            
            	</div>
			</div>


            <footer class="footer text-right">
                2016 - 2017 © Uplon.
            </footer>


    </div>
        <!-- END wrapper -->

        <!-- jQuery  -->
        <script src="assets/js/jquery.min.js"></script>
        <script src="assets/js/tether.min.js"></script><!-- Tether for Bootstrap -->
        <script src="assets/js/bootstrap.min.js"></script>
        <script src="assets/js/detect.js"></script>
        <script src="assets/js/fastclick.js"></script>
        <script src="assets/js/jquery.blockUI.js"></script>
        <script src="assets/js/waves.js"></script>
        <script src="assets/js/jquery.nicescroll.js"></script>
        <script src="assets/js/jquery.scrollTo.min.js"></script>
        <script src="assets/js/jquery.slimscroll.js"></script>
        <script src="assets/plugins/switchery/switchery.min.js"></script>
		
        <!--Morris Chart-->
		<!-- <script src="assets/plugins/morris/morris.min.js"></script> -->
		<script src="assets/plugins/raphael/raphael-min.js"></script>

        <!-- Counter Up  -->
        <script src="assets/plugins/waypoints/lib/jquery.waypoints.js"></script>
        <script src="assets/plugins/counterup/jquery.counterup.min.js"></script>

        <!-- App js -->
        <script src="assets/js/jquery.core.js"></script>
        <script src="assets/js/jquery.app.js"></script>

        <!-- Page specific js -->
        <!-- <script src="assets/pages/jquery.dashboard.js"></script> -->
        <script src="assets/js/tab.js"></script>
        
        <script>
			$(".list-unstyled a,.waves-effect").tab();
            var Width = $("body").width();        /**当前页面的宽度**/
            var leftWidth = $(".left").width();   /**左边菜单页面的宽度**/
            var rightWidth = Width - leftWidth;   
            $("#page-content").css("width",rightWidth);  /**iframe的宽度**/

            // $('span.button-menu-mobile').click(function(){
            //     var Width = $(window).width();        /**当前页面的宽度**/
            //     var leftWidth = $(".left").width();   /**左边菜单页面的宽度**/
                
            //     $("#page-content").css("width",rightWidth);
                
            // })

            $(window).resize(function() {
                var winW = $(window).width();
                var leftWidth = $(".left").width();
                var rightWidth = winW - leftWidth;
                if(winW<768){
                    $("#page-content").css("width",winW);
                    $("#wrapper.enlarged .content-page .content").css("padding","0");
                   
                    $("#page-content").css("width",winW);
                }else if(winW>768){
                    $("#page-content").css("width",rightWidth);
                    
                }
                $('.zmdi-view-dashboard').parents('a').css("height","51px");
                
            });
        </script>

        

        <!-- <script type = "text/javascript">
            function setScroll(){  
                $("#page-content .active").slimScroll({  
                    height: boxHeight,  
                    alwaysVisible: true,  
                });  
            };  
              
            setScroll();  
              
            $(window).on("resize",setScroll);
            
        </script> -->
        <script type="text/javascript">
            $(document).ready(function(){
                linkframe = function(url, value) {
                    $("#menu-list a.active").removeClass("active");
                    $("#menu-list a[data-url='" + url + "'][data-value='" + value + "']").addClass("active");
                    $("#page-content iframe.active").removeClass("active");
                    $("#page-content .iframe-content[data-url='" + url + "'][data-value='" + value + "']").addClass("active");
                    $("#menu-all-ul li.active").removeClass("active");
                    $("#menu-all-ul li[data-url='" + url + "'][data-value='" + value + "']").addClass("active");
                }
                var linkUrl = this.href;
                var linkHtml = this.text;
                $("<a>", {
                    "html": "首页",
                    "href": "javascript:void(0);",
                    "data-url": "chart-c3.html",
                    "data-value": "图表"
                }).addClass('active').css("width","65").bind("click",
                function() {
                    var jthis = $(this);
                    linkframe(jthis.data("url"), jthis.data("value"))
                }).appendTo("#menu-list");
                $("<iframe>", {
                    "class": "iframe-content",
                    "data-url": "chart-c3.html",
                    "data-value": "图表",
                    src: "chart-c3.html"
                }).appendTo("#page-content");
                $("<li>", {
                    "html": "chart-c3.html",
                    "data-url": "chart-c3.html",
                    "data-value": "图表"
                }).bind("click",
                function() {
                    var jthis = $(this);
                    linkframe(jthis.data("url"), jthis.data("value"));
                    move($("#menu-list a[data-url='" + "chart-c3.html" + "'][data-value='" + "图表" + "']"));
                    $("#menu-all").hide();
                    event.stopPropagation();
                }).appendTo("#menu-all-ul");
                
            })
        </script>


    </body>
</html>